<template>
    <div class="background">
        <div class="empty"></div>
        <div class="container">
            <label id='la'>请输入你的手机号</label>
            <el-form :rules='tel_rule' :model='form'>
                <el-form-item prop="input">
                    <el-input id='input_box' v-model="form.input" placeholder="请输入内容"  >
                    </el-input>
                </el-form-item>
            </el-form>
            <div class="mess">{{message}}</div>
        </div>


        <router-link to="/questionnaire">
            <el-button id='answer'  @click="click">我要答题</el-button>
        </router-link>

    </div>
</template>


<script>
    // console.log(data());
    export default {
        // name: 'Shouye',
        data() {

            return {
                message: '',
                form: {
                    input: '',
                },
                
                tel_rule: {
                    input: {
                        validator: this.check_phone,
                        trigger: 'blur'
                    }
                }
            }
        },
        methods: {
            check_phone(rule, value, callback) {
                console.log(value);
                if (!value) {
                    return callback( this.message = '手机号不能为空' );
                } else {
                    const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
                    // console.log(reg.test(value));
                    if (reg.test(value)) {
                        this.disable = false
                        sessionStorage.setItem('user_name', value);
                        console.log(sessionStorage.getItem('user_name'));
                        callback(this.message = "手机号验证成功");
                    } else {
                        // return callback(new Error('请输入正确的手机号'));
                        return callback(this.message ='请输入正确的手机号' );
                    }
                }
            },

            click() {
                console.log("clicked");
            }
        }
    }
</script>

<style>
    .background {
        display: flex;
        flex-direction: column;
        align-items: center;
        /* justify-content: space-around; */

        margin: 0;
        padding: 0;
        width: 100%;
        height: 100vh;
        background-image: url(../assets/shouye.png);
        background-size: 100% 100%;
    }

    #answer {
        position: absolute;
        top: 76vh;
        left: 20vw;
        /* margin-top: 31.5rem; */
        border-radius: 70px;
        background-color: rgb(247, 97, 108);
        width: 440px;
        height: 125px;
    }

    #input_box {

        width: 450px;
        height: 100px;
        border-radius: 70px;

        background-color: rgb(255, 244, 194);
    }

    #la {
        color: rgb(255, 244, 194);
        background-color: rgb(255, 113, 123);
    }

    .background .container {
        position: absolute;
        top: 39vh;
        left: 18vw;

        background-color: rgb(255, 113, 123);
        width: 480px;
        height: 250px;
    }
    .background .container .mess {
        color: red;
        font-size: 12px;
    }
</style>